<template>
    <!-- 文章预览弹窗 -->
    <div v-if="visible" 
         class="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-black bg-opacity-60 backdrop-blur-sm"
         @click="handleBackdropClick">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-hidden transform transition-all duration-300"
             @click.stop>
            <!-- 弹窗头部 -->
            <div class="flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700">
                <div class="flex items-center space-x-3 flex-1 min-w-0">
                    <div class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-600 rounded-full"></div>
                    <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white line-clamp-2 flex-1">
                        {{ article.title || '文章预览' }}
                    </h2>
                </div>
                <button @click="closeModal" 
                        class="ml-4 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full transition-all duration-200">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- 弹窗内容容器 -->
            <div class="flex flex-col h-[calc(95vh-140px)]">
                <!-- 加载状态 -->
                <div v-if="loading" class="flex items-center justify-center flex-1">
                    <div class="text-center">
                        <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600"></div>
                        <p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">正在加载预览内容...</p>
                    </div>
                </div>

                <!-- 错误状态 -->
                <div v-else-if="error" class="flex flex-col items-center justify-center flex-1">
                    <svg class="w-16 h-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-600 dark:text-gray-300 text-center mb-4">{{ error }}</p>
                    <button @click="closeModal" 
                            class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors">
                        关闭
                    </button>
                </div>

                <!-- 文章内容 -->
                <div v-else-if="article.title" class="flex flex-col flex-1 overflow-hidden">
                    <!-- 可滚动的内容区域 -->
                    <div class="flex-1 overflow-y-auto custom-scrollbar">
                        <!-- 文章元信息区域 -->
                        <div class="px-4 sm:px-6 py-4 bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 border-b border-gray-200 dark:border-gray-600">
                            <!-- 标签 -->
                            <div v-if="article.tags && article.tags.length > 0" class="mb-3">
                                <span v-for="(tag, index) in article.tags" :key="index"
                                      class="inline-block mr-2 mb-1 px-3 py-1 text-xs font-medium bg-blue-600 text-white rounded-full transition-colors">
                                    # {{ tag.name }}
                                </span>
                            </div>

                            <!-- Meta 信息 -->
                            <div class="flex flex-wrap gap-4 text-sm text-gray-200">
                                <!-- 作者 -->
                                <div class="flex items-center">
                                    <img v-if="article.authorAvatar" 
                                         :src="article.authorAvatar" 
                                         class="w-4 h-4 rounded-full mr-2"
                                         :alt="article.author">
                                    <svg v-else class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
                                    </svg>
                                    <span class="font-medium">{{ article.author || '博主' }}</span>
                                </div>

                                <!-- 发布时间 -->
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span>{{ article.createTime }}</span>
                                </div>

                                <!-- 分类 -->
                                <div v-if="article.categoryName" class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
                                    </svg>
                                    <span class="font-medium">{{ article.categoryName }}</span>
                                </div>

                                <!-- 阅读量 -->
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                                    </svg>
                                    <span>{{ article.readNum || 0 }} 次阅读</span>
                                </div>
                            </div>
                        </div>

                        <!-- 文章内容预览 -->
                        <div class="px-4 sm:px-6 py-6">
                            <div class="prose prose-lg max-w-none dark:prose-invert article-preview-content">
                                <div v-html="article.content"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 底部操作栏 -->
                    <div class="px-4 sm:px-6 py-4 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border-t border-gray-200 dark:border-gray-600">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center text-blue-300">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="text-sm font-semibold">这是文章预览，查看完整内容请点击阅读全文</span>
                            </div>
                            <button @click="goToFullArticle"
                                    class="px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white text-sm font-medium rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                                阅读全文
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { getArticlePreview } from '@/api/frontend/article'
import { useRouter } from 'vue-router'

const router = useRouter()

// Props
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    articleId: {
        type: [String, Number],
        default: null
    }
})

// Emits
const emits = defineEmits(['update:visible', 'close'])

// 响应式数据
const loading = ref(false)
const article = ref({})
const error = ref('')

// 关闭弹窗
const closeModal = () => {
    emits('update:visible', false)
    emits('close')
}

// 点击背景关闭弹窗
const handleBackdropClick = (event) => {
    if (event.target === event.currentTarget) {
        closeModal()
    }
}

// 跳转到完整文章页面
const goToFullArticle = () => {
    if (props.articleId) {
        router.push(`/article/${props.articleId}`)
        closeModal()
    }
}

// 获取文章预览数据
const fetchArticlePreview = async (articleId) => {
    if (!articleId) return

    loading.value = true
    error.value = ''
    article.value = {}

    try {
        const response = await getArticlePreview(articleId)
        if (response.success) {
            article.value = response.data
        } else {
            error.value = response.errorMessage || '获取文章预览失败'
        }
    } catch (err) {
        console.error('获取文章预览失败:', err)
        error.value = '网络请求失败，请稍后重试'
    } finally {
        loading.value = false
    }
}

// 监听弹窗显示状态和文章ID变化
watch([() => props.visible, () => props.articleId], ([visible, articleId]) => {
    if (visible && articleId) {
        fetchArticlePreview(articleId)
    }
}, { immediate: true })

// 监听ESC键关闭弹窗
const handleKeydown = (event) => {
    if (event.key === 'Escape' && props.visible) {
        closeModal()
    }
}

// 组件挂载时添加键盘事件监听
onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
/* 文本截断样式 */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 自定义滚动条 */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}

.dark .custom-scrollbar {
    scrollbar-color: #4a5568 transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4a5568;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #2d3748;
}

/* 文章预览内容样式 */
:deep(.article-preview-content) {
    color: #f8fafc;
    line-height: 1.8;
    font-size: 16px;
}

:deep(.article-preview-content h1),
:deep(.article-preview-content h2),
:deep(.article-preview-content h3),
:deep(.article-preview-content h4),
:deep(.article-preview-content h5),
:deep(.article-preview-content h6) {
    color: #ffffff;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

:deep(.article-preview-content h1) {
    font-size: 2rem;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 0.5rem;
}

:deep(.article-preview-content h2) {
    font-size: 1.75rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

:deep(.article-preview-content h3) {
    font-size: 1.5rem;
}

:deep(.article-preview-content h4) {
    font-size: 1.25rem;
}

:deep(.article-preview-content p) {
    margin-bottom: 1.5rem;
    text-align: justify;
}

:deep(.article-preview-content blockquote) {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(to right, #1f2937, #111827);
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #e5e7eb;
}

:deep(.article-preview-content code:not(pre code)) {
    background: #374151;
    color: #f8fafc;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #6b7280;
}

:deep(.article-preview-content pre) {
    background: #1e293b;
    color: #f1f5f9;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 2rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

:deep(.article-preview-content pre code) {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.875rem;
}

:deep(.article-preview-content ul),
:deep(.article-preview-content ol) {
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

:deep(.article-preview-content li) {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

:deep(.article-preview-content ul li) {
    list-style-type: disc;
}

:deep(.article-preview-content ol li) {
    list-style-type: decimal;
}

:deep(.article-preview-content a) {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

:deep(.article-preview-content a:hover) {
    color: #1d4ed8;
}

:deep(.article-preview-content img) {
    max-width: 100%;
    border-radius: 8px;
    margin: 2rem auto;
    display: block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

:deep(.article-preview-content img:hover) {
    transform: scale(1.02);
}

:deep(.article-preview-content table) {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

:deep(.article-preview-content th),
:deep(.article-preview-content td) {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #374151;
    color: #f8fafc;
}

:deep(.article-preview-content th) {
    background: #374151;
    font-weight: 600;
    color: #ffffff;
}

:deep(.article-preview-content tr:hover) {
    background: #374151;
}

/* 暗色模式样式已集成到主样式中 */
</style>